<template>
  <div class="dialog-wrapper" v-if="showLink">
    <div class="dialog-block">
      <i class="el-icon-circle-close-outline icon-del"
         @click="changeShow"
      ></i>
      <div class="dialog">
        <p class="title">{{dialogLink.title}}</p>
        <div class="inp-wrapper">
          <div class="link-item">
            <span class="link-name">{{dialogLink.linkName}}</span>
            <el-input type="text" class="input-link" v-model="linkName" />
          </div>
          <div class="link-item">
            <span class="link-address">{{dialogLink.linkAddress}}</span>
            <el-input type="text" class="input-link" v-model="linkAddress"  />
          </div>
          
        </div>
        <input type="button" class="up-btn" @click="uploadLink" :value="dialogLink.btnName" />
      </div>
    </div>
  </div>
</template>

<script>
import {formatDate1} from '@/utils/dateFomart.js'
export default {
  name: "picDialog",
  props: {
    showLink: {
      type: Boolean,
      default: false
    },
    dialogLink: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      linkClassify: this.dialogLink.valueLinkClassify,
      linkName: this.dialogLink.placeLinkName,
      linkAddress: this.dialogLink.placeLinkAddress,
      createUserId: this.dialogLink.createUserId
    };
  },
  methods: {

    changeShow() {
      this.$emit("hidden-link");
    },
    uploadLink() {
      var result = {};
      var createTime = formatDate1(new Date());
      var userId=sessionStorage.getItem('userId');

      // console.log(createTime);
      if (this.dialogLink.placeLinkId == "") {
        result = {
          name: this.linkName,
          url: this.linkAddress,
          createUserId: userId,
          // createTime: '2018-06-21T06:15:33.811Z'
          createTime: createTime,
        };
      } else {
        console.log(this.dialogLink.placeLinkId)
        result = {
          name: this.linkName,
          url: this.linkAddress,
          createUserId: userId,
          createTime: createTime,
          id: this.dialogLink.placeLinkId,
          updateUserId:this.dialogLink.updateUserId
        };
      }
      this.$emit("upload-link", result);
    },
  },
 
  beforeUpdate(){
    
    console.log(this.dialogLink);
  },

  mounted(){ 

  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialog-wrapper {
  position: absolute;
  top: -44px;
  left: -46px;
  width: calc(100% + 88px);
  height: calc(100% + 44px);
  text-align: center;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
  .dialog-block {
    margin-left: 82px;
    .icon-del {
      margin-top: 182px;
      font-size: 34px;
      padding: 30px;
      cursor: pointer;
      color: #fff;
      &::after {
        display: block;
        width: 1px;
        height: 52px;
        margin-left: 50%;
        margin-bottom: -34px;
        background-color: #fff;
        content: "";
      }
    }
    .dialog {
      position: relative;
      width: 777px;
      height: 477px;
      margin-left: calc(50% - 388.8888px);
      border-radius: 10px;
      background-color: #fff;
      .title {
        margin: 0;
        text-align: left;
        line-height: 20px;
        font-size: 20px;
        font-weight: 700;
        &::before {
          display: inline-block;
          margin: 12px 10px 0 12px;
          vertical-align: bottom;
          width: 8px;
          height: 20px;
          background-color: #2ce2e0;
          content: "";
        }
      }
      .inp-wrapper {
        margin-top: 38px;
        text-align: left;
        .link-item {
          margin: 0 0 20px 26px;
          line-height: 32px;
          font-size: 20px;
          .input-link {
            width: 72%;
            height: 32px;
            margin-left: 10px;
          }
          .input-select {
            width: 200px;
            height: 32px;
            margin-left: 10px;
          }
        }
      }

      .up-btn {
        position: absolute;
        bottom: 30px;
        width: 100px;
        height: 34px;
        margin-left: -50px;
        line-height: 34px;
        font-size: 18px;
        color: #2de3e1;
        background-color: #f2f4f9;
        border: 1px solid #2de3e1;
        border-radius: 4px;
      }
    }
  }
}
</style>
